import React, { useState, useEffect } from 'react'
import { useParams, useHistory } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
    Toast
} from 'antd-mobile'
import { FormInstance } from 'antd-mobile/es/components/form'
import dayjs from 'dayjs'
import { CloseCircleFill } from 'antd-mobile-icons'
import { addCard, getMan, getHCard } from '../api/api'
import type { ToastHandler } from 'antd-mobile/es/components/toast'
type ParamsType = {
    man: string;
    id: string
}
export default function () {
    const history = useHistory()
    const [pickerVisible, setPickerVisible] = useState(false)
    const onFinish = async (params: any) => {

        const name = params.name
        const address = params.address
        const sex = (params.sex)[0]
        const tel = params.tel
        const Y = params.birthday.getFullYear() + "-";
        const M = (params.birthday.getMonth() + 1 < 10 ? "0" + (params.birthday.getMonth() + 1) : params.birthday.getMonth() + 1) + "-";
        const D = params.birthday.getDate() < 10 ? "0" + params.birthday.getDate() : params.birthday.getDate() + "";
        const birthday = Y + M + D;
        const cardId = params.cardId
        const id = idm.man
        const obj = {
            name, address, sex, tel, birthday, cardId, id
        }
        const data = await getMan(obj)
        console.log(data);

        //@ts-ignore
        if (data.status == 200) {
            Toast.show({
                content: '修改成功！',
                afterClose: () => {
                    history.push('/outpatient/hospitalList/detail/' + idm.id + '/card')
                },
            })
        }
    };
    const idm = useParams<ParamsType>()
    const [list, setList] = useState<any>([])
    const Render = async () => {
        let data: any = await getHCard()
        data = data.data.rows
        data = data.filter((item: any) => {
            return item.id == idm.man
        });

        setList(data)


    }
    useEffect(() => {
        Render()

    }, [])
    useEffect(() => {
        console.log(list);

    }, [list])
    if (list.length) {
        return (
            <div>
                <Form
                    initialValues={{
                        name: list[0].name,
                        sex: list[0].sex,
                        cardId: list[0].cardId,
                        tel: list[0].tel,
                        address: list[0].address,
                    }}
                    layout='horizontal'
                    onFinish={onFinish}
                    footer={
                        <Button
                            block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    }
                >
                    <Form.Item
                        name='name'
                        label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }, {
                            pattern: /^[\u4e00-\u9fa5]+$/,
                            message: "必须输入汉字",
                        }]}
                    >
                        <Input onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item name='sex' label='性别'>
                        <Selector
                            columns={3}
                            options={[
                                { label: '男', value: '0' },
                                { label: '女', value: '1' },
                                { label: '其他', value: 'banana' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        name='cardId'
                        label='身份证'
                        rules={[{ required: true, message: '身份证不能为空' }, {
                            pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
                            message: "请输入正确身份证号码",
                        }]}
                    >
                        <Input onChange={console.log} placeholder='请输入身份证' />
                    </Form.Item>
                    <Form.Item
                        name='tel'
                        label='电话'
                        rules={[{ required: true, message: '电话不能为空' }, {
                            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                            message: "手机号格式不对",
                        }]}
                    >
                        <Input onChange={console.log} placeholder='请输入电话' />
                    </Form.Item>
                    <Form.Item
                        noStyle
                        shouldUpdate={(prevValues, curValues) =>
                            prevValues.birthday !== curValues.birthday
                        }
                    >
                        {({ getFieldValue, setFieldsValue }) => (
                            <Form.Item
                                name='birthday'
                                label='生日'
                                trigger='onConfirm'
                                arrow={
                                    getFieldValue('birthday') ? (
                                        <CloseCircleFill
                                            style={{
                                                color: 'var(--adm-color-light)',
                                                fontSize: 14,
                                            }}
                                            onClick={e => {
                                                e.stopPropagation()
                                                setFieldsValue({ birthday: null })
                                            }}
                                        />
                                    ) : (
                                        true
                                    )
                                }
                                onClick={() => {
                                    setPickerVisible(true)
                                }}
                            >
                                <DatePicker
                                    visible={pickerVisible}
                                    onClose={() => {
                                        setPickerVisible(false)
                                    }}
                                >
                                    {value =>
                                        value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                                    }
                                </DatePicker>
                            </Form.Item>
                        )}
                    </Form.Item>
                    <Form.Item name='address' label='地址' help='详情地址'>
                        <Input placeholder='请输入地址' />
                    </Form.Item>
                </Form>
            </div>
        )
    }
    return <div></div>
}
